<!--此处代码可以重构，将组件划分-->
<template>
  <div v-show="showModal" class="modal-mask">
    <div class="LoginContainer" id="loginCard">
      <div class="closeModal" @click="CloseModal">
        <!--        <svg t="1690552345393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
        <!--             p-id="11721" width="24" height="24">-->
        <!--          <path-->
        <!--              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"-->
        <!--              fill="#2c2c2c" p-id="11722"></path>-->
        <!--        </svg>-->
        ×
      </div>
      <div class="Scan_title">
        使用扫码登录更快捷
      </div>
      <div class="Scan_left">
        <img src="@/static/img.jpg" width="150" height="150">
      </div>
      <div class="v-line"></div>
      <div class="LoginMode">
        <span :class="{active: PasswordMode}" class="LoginMethod" @click="toPasswordMode">密码登录</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span
          :class="{active: MessageMode}" class="LoginMethod" @click="toMessageMode">短信登录</span>
      </div>
      <div class="LoginCard" v-if="PasswordMode">
        <div class="input-item">
          <div class="input-info">
            账号
          </div>
          <input title="账号" v-model="username" autocomplete="on" type="text" placeholder="请输入账号">
        </div>
        <div class="input-item">
          <div class="input-info">
            密码
          </div>
          <input title="密码" v-model="password" autocomplete="on" v-bind:type="showPassword ? 'password' : 'text'"
                 placeholder="请输入密码">
          <div class="show-password" v-if="showPassword" @click="toggleShow">
            <svg data-v-911eaac8="" width="20" height="20" viewBox="0 0 20 20" fill="none"
                 xmlns="http://www.w3.org/2000/svg">
              <path data-v-911eaac8="" fill-rule="evenodd" clip-rule="evenodd"
                    d="M17.5753 6.85456C17.7122 6.71896 17.8939 6.63806 18.0866 6.63806C18.7321 6.63806 19.0436 7.42626 18.5748 7.87006C18.1144 8.30554 17.457 8.69885 16.6478 9.03168L18.1457 10.5296C18.2101 10.5941 18.2613 10.6706 18.2962 10.7548C18.331 10.839 18.349 10.9293 18.349 11.0204C18.349 11.1116 18.331 11.2019 18.2962 11.2861C18.2613 11.3703 18.2101 11.4468 18.1457 11.5113C18.0812 11.5757 18.0047 11.6269 17.9205 11.6618C17.8363 11.6967 17.746 11.7146 17.6548 11.7146C17.5637 11.7146 17.4734 11.6967 17.3892 11.6618C17.305 11.6269 17.2284 11.5757 17.164 11.5113L15.3409 9.68819C15.2898 9.63708 15.247 9.57838 15.2141 9.51428C14.4874 9.71293 13.6876 9.87122 12.8344 9.98119C12.8363 9.99011 12.8381 9.99908 12.8397 10.0081L13.2874 12.5472C13.315 12.7266 13.2713 12.9098 13.1656 13.0573C13.0598 13.2049 12.9005 13.3052 12.7217 13.3367C12.5429 13.3683 12.3589 13.3285 12.2091 13.2259C12.0592 13.1234 11.9555 12.9663 11.9202 12.7882L11.4725 10.2491C11.4645 10.2039 11.4611 10.1581 11.4621 10.1125C10.9858 10.1428 10.4976 10.1586 10.0002 10.1586C9.57059 10.1586 9.14778 10.1468 8.73362 10.1241C8.73477 10.1656 8.7322 10.2074 8.72578 10.249L8.27808 12.7881C8.24612 12.9694 8.14345 13.1306 7.99265 13.2362C7.84186 13.3418 7.65528 13.3831 7.47398 13.3512C7.29268 13.3192 7.1315 13.2166 7.0259 13.0658C6.9203 12.915 6.87892 12.7284 6.91088 12.5471L7.35858 10.008C7.35877 10.007 7.35896 10.0061 7.35915 10.0052C6.50085 9.90284 5.6941 9.75191 4.95838 9.56025C4.93012 9.60634 4.89634 9.64933 4.85748 9.68819L3.03438 11.5113C2.96992 11.5757 2.8934 11.6269 2.80918 11.6618C2.72496 11.6967 2.63469 11.7146 2.54353 11.7146C2.45237 11.7146 2.36211 11.6967 2.27789 11.6618C2.19367 11.6269 2.11714 11.5757 2.05268 11.5113C1.98822 11.4468 1.93709 11.3703 1.90221 11.2861C1.86732 11.2019 1.84937 11.1116 1.84937 11.0204C1.84937 10.9293 1.86732 10.839 1.90221 10.7548C1.93709 10.6706 1.98822 10.5941 2.05268 10.5296L3.49373 9.08855C2.6197 8.744 1.91247 8.33062 1.42559 7.87006C0.956591 7.42636 1.26799 6.63816 1.91359 6.63816C2.10629 6.63816 2.28789 6.71896 2.42489 6.85456C2.70009 7.12696 3.19529 7.45886 3.98459 7.77796C5.54429 8.40856 7.73699 8.77016 10.0001 8.77016C12.2632 8.77016 14.4558 8.40856 16.0156 7.77796C16.8049 7.45886 17.3001 7.12696 17.5753 6.85456Z"
                    fill="#9499A0"></path>
            </svg>
          </div>
          <div class="show-password" v-if="!showPassword" @click="toggleShow">
            <svg t="1690895650117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2305" width="20" height="20">
              <path
                  d="M512 224a508.48 508.48 0 0 1 444.16 272.64 32 32 0 0 1 0 32A508.48 508.48 0 0 1 512 800 508.48 508.48 0 0 1 67.84 527.36a32 32 0 0 1 0-32A508.48 508.48 0 0 1 512 224z m0 64a442.24 442.24 0 0 0-379.2 224A442.24 442.24 0 0 0 512 736a442.24 442.24 0 0 0 379.2-224A442.24 442.24 0 0 0 512 288z"
                  p-id="2306" fill="#707070"></path>
              <path d="M640 512a128 128 0 1 1-128-128 128 128 0 0 1 128 128" p-id="2307" fill="#707070"></path>
            </svg>
          </div>
          &nbsp;&nbsp;
          <div class="forget-password">
            忘记密码？
          </div>
        </div>
        <div class="button-group">
          <button class="register-button" type="button" @click="toRegister">注册</button>
          <button class="login-button" type="submit" :class="{disabled: disable}" @click.prevent="loginByPassword">
            登录
          </button>
        </div>
      </div>

      <div class="LoginCard" v-if="MessageMode">
        <div class="input-item">
          <div class="input-info" style="margin-right: 1em">
            手机号
          </div>
          <input title="手机号" v-model="phone" autocomplete="on" type="text" placeholder="请输入手机号">
          <div class="applyCode" v-if="!codeSend" :class="{active: codeActive}" @click.prevent="sendCode">获取验证码
          </div>
          <div class="applyCode" v-if="codeSend">{{ remainingTime }}s后重试</div>
        </div>
        <div class="input-item">
          <div class="input-info" style="margin-right: 1em">
            验证码
          </div>
          <input title="验证码" v-model="messageCode" autocomplete="on" type="text" placeholder="请输入验证码"
                 style="width: 160px">
        </div>
        <div class="button-group">
          <button class="messageLoginBtn" @click.prevent="smsLogin">注册/登录</button>
        </div>
      </div>
      <div class="loginAlert">
        <p> 未注册过VIDEO•HUB的手机号，我们将自动帮你注册账号 </p>
        <p>&nbsp;&nbsp;登录或完成注册即代表你同意
          <span class="link_word">用户协议</span>
          和&nbsp;<span class="link_word">隐私政策</span>
        </p>

      </div>
    </div>
  </div>

  <div class="toolbar">
    <div class="logo">
      <img src="@/static/logo.png" alt="logo"/>
    </div>
    <div class="nav">
      <span class="menu"><router-link to="/" exact-active-class="nav-active">首页</router-link></span>
      <span class="menu"><router-link to="/Live" exact-active-class="live-active">LIVE</router-link></span>
      <span class="menu"><router-link to="/Hot" exact-active-class="nav-active">收藏夹</router-link></span>
      <span class="menu" id="userCenter" @click="toUserCenter">个人中心</span>
    </div>
    <div class="search-text" role="search" ref="container">
      <div class="search-button">
        <svg t="1689926910818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="3286" width="30" height="30" @click="search">
          <path
              d="M799.117225 727.668111A446.399272 446.399272 0 0 0 896.675651 448.449169a51.046313 51.046313 0 1 0-102.165758 0 346.134953 346.134953 0 1 1-39.345152-160.525295 51.046313 51.046313 0 1 0 90.464597-47.462832 448.300711 448.300711 0 1 0-118.035456 558.730412c1.316381 1.828306 2.92529 3.58348 4.534199 5.19239l204.624044 204.624044a51.046313 51.046313 0 0 0 72.181534-72.181534l-204.624044-204.624043a51.558238 51.558238 0 0 0-5.119258-4.5342z"
              fill="#2c2c2c" p-id="3287"></path>
        </svg>
      </div>
      <input class="search" type="search" ref="input" id="key" v-model="key" placeholder="搜索..."
             @keyup.enter="search">
    </div>
    <div class="change-mode">
      <change-button></change-button>
    </div>
    <!--    采用elementui方案 取消手写方案-->
    <!--    <div class="miniInfoCard" v-show="showMiniCard" @mouseover="showMiniLoginModal" @mouseleave="closeMiniLoginModal">-->
    <!--      <div class="nickname_container">欢迎回来，{{ this.store.state.user.nickname }}</div>-->
    <!--      <div>-->
    <!--        <span class="item-title">用户等级：</span>-->
    <!--        <span class="user_type">{{ this.store.state.user.usertype }}</span>-->
    <!--      </div>-->
    <!--      <div class="user_menu">-->
    <!--        <div class="menu_item">-->
    <!--          <svg t="1691399478470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
    <!--               p-id="4057" width="16" height="16">-->
    <!--            <path-->
    <!--                d="M788.8 288c0 153.6-123.2 276.8-276.8 276.8S235.2 441.6 235.2 288 358.4 12.8 512 12.8 788.8 134.4 788.8 288zM864 1012.8H136c-32 0-46.4-24-46.4-56 0-190.4 139.2-340.8 324.8-340.8h171.2c185.6 0 347.2 152 347.2 342.4v-3.2c1.6 32-36.8 56-68.8 57.6z"-->
    <!--                fill="#333333" p-id="4058"></path>-->
    <!--          </svg>-->
    <!--          个人中心-->
    <!--        </div>-->
    <!--        <div class="menu_item">-->
    <!--          <svg t="1691399553291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
    <!--               p-id="5477" width="16" height="16">-->
    <!--            <path-->
    <!--                d="M1006.942208 391.708672c-2.10944-5.599232-7.458816-9.310208-13.459456-9.310208L672.516096 382.398464 526.367744 42.118144c-2.251776-5.26336-7.45472-8.675328-13.205504-8.675328-0.021504 0-0.043008 0-0.043008 0-5.772288 0-10.975232 3.45088-13.2096 8.762368L356.626432 382.399488 32.821248 382.399488c-5.983232 0-11.355136 3.709952-13.459456 9.271296-2.10944 5.604352-0.54784 11.91936 3.959808 15.880192L290.67264 642.930688l-88.240128 314.625024c-1.600512 5.72928 0.504832 11.880448 5.28896 15.418368 4.780032 3.53792 11.246592 3.791872 16.303104 0.590848l289.137664-184.52992 289.133568 184.52992c2.359296 1.514496 5.056512 2.230272 7.7312 2.230272 2.989056 0 5.961728-0.927744 8.489984-2.7392 4.780032-3.493888 6.928384-9.560064 5.413888-15.29344l-84.93568-319.50848L1002.939392 407.59296C1007.468544 403.633152 1009.047552 397.313024 1006.942208 391.708672z"-->
    <!--                fill="#FF9000" p-id="5478"></path>-->
    <!--          </svg>-->
    <!--          我的收藏-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="profile" @click="ShowModal" @mouseenter="showMiniLoginModal" @mouseleave="closeMiniLoginModal">
      <el-popover
          trigger="hover"
          :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
      >
        <template #reference>
          <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4"/>
        </template>
        <template #default>
          <div v-if="online">
            <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
            >
              <el-avatar
                  :size="60"
                  src="https://avatars.githubusercontent.com/u/72015883?v=4"
                  style="margin-bottom: 8px"
              />
              <div style="display: inline-block">昵称：{{ this.store.state.user.nickname }}</div>
              <div>
                <p
                    class="demo-rich-content__name"
                    style="margin: 0; font-weight: 500"
                >
                  用户等级：{{ this.store.state.user.usertype }}
                </p>
              </div>
              <p class="demo-rich-content__desc" style="margin: 0;line-height: 16px">
                <el-icon :size="20" style="vertical-align: middle;top: -2px">
                  <House/>
                </el-icon>&nbsp;
                <router-link to="/userCenter">个人中心</router-link>
              </p>
              <p>
                <el-icon :size="20" style="vertical-align: middle;top: -2px"><Tickets /></el-icon>&nbsp;
                <router-link to="/history">历史记录</router-link>
              </p>
            </div>
          </div>
          <div v-else>
            <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
            >
              <el-avatar
                  :size="60"
                  src="https://avatars.githubusercontent.com/u/72015883?v=4"
                  style="margin-bottom: 8px"
              />
              <div>
                <p
                    class="demo-rich-content__name"
                    style="margin: 0; font-weight: 500"
                >
                  登录开启优质账号服务!
                </p>
                <p
                    class="demo-rich-content__mention"
                    style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                >
                  Video Hub
                </p>
              </div>

              <p class="demo-rich-content__desc" style="margin: 0">
                新用户可享超低折扣会员！
              </p>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
    <div class="upload-button" @click="toUpload">
        <el-button type="success" :size="'large'">
          <svg t="1689930491794" class="icon" viewBox="0 0 1264 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6813" width="20" height="20">
            <path
                d="M992.171444 312.62966C975.189616 137.155482 827.415189 0 647.529412 0 469.849434 0 323.616239 133.860922 303.679205 306.210218 131.598564 333.839271 0 482.688318 0 662.588235c0 199.596576 161.815189 361.411765 361.411765 361.411765h184.014581V692.705882H294.530793l337.939795-361.411764 337.939796 361.411764H726.132229v331.294118H933.647059v-1.555371c185.470975-15.299199 331.294118-170.426291 331.294117-359.856394 0-168.969898-116.101408-310.367302-272.769732-349.958575z"
                p-id="6814" fill="#ffffff"></path>
          </svg>
          <b>上传视频</b>
        </el-button>
    </div>
  </div>
</template>
<style src="@/assets/Header.css" scoped></style>
<style scoped>
.child-focus {
  width: 380px;
}
</style>
<script>
import {computed, defineComponent} from "vue";
import Api from "@/api/user";
import ChangeButton from "@/components/ChangeButton.vue";
import {ElMessage} from 'element-plus'
import Cookies from 'js-cookie'
import store from "../store";
import router from "@/router/router";
import {HomeFilled, House, Tickets} from "@element-plus/icons-vue";

//判断手机号格式
const phoneRegex = /^1[3-9]\d{9}$/;
export default defineComponent({
      computed: {
        store() {
          return store
        }
      },
      components: {
        House,
        Tickets,
        HomeFilled,
        ChangeButton
      },
      data() {
        return {
          showModal: false,
          showPassword: true,
          avatar: computed(() => store.state.user.avatar),
          prefix: "http://rygjiov07.hn-bkt.clouddn.com/",
          online: computed(() => store.state.user.online),
          showMiniCard: false,
          key: '',
          username: '',
          password: '',
          phone: '',
          messageCode: '',
          PasswordMode: true,
          MessageMode: false,
          disable: true,
          codeActive: false,
          codeSend: false,
          remainingTime: 60,
        }
      },
      mounted() {
        // 聚焦输入框时，使父元素宽度变为300px
        this.$refs.input.addEventListener('focus', () => {
          this.$refs.container.classList.add("child-focus");
        });

        // 失去焦点时，恢复父元素初始宽度
        this.$refs.input.addEventListener('blur', () => {
          this.$refs.container.classList.remove("child-focus");
        });
      },
      methods: {
        ShowModal() {
          if (!this.online) {
            this.showModal = true;
          }
        },
        CloseModal() {
          this.showModal = false;
          this.reset();
        },
        reset() {
          this.username = '';
          this.password = '';
          this.phone = '';
          this.messageCode = '';
        },
        showMiniLoginModal() {
          if (this.online) {
            this.showMiniCard = true;
          }
        },
        closeMiniLoginModal() {
          this.showMiniCard = false;
        },
        toPasswordMode() {
          this.MessageMode = false;
          this.PasswordMode = true;
        },
        toMessageMode() {
          this.MessageMode = true;
          this.PasswordMode = false;
        },
        sendCode() {
          if (this.codeActive) {
            this.codeSend = true;
            Api.getCode(this.phone);
            this.timer = setInterval(() => {
              this.remainingTime--;
              if (this.remainingTime === 0) {
                clearInterval(this.timer); // 停止定时器
                this.codeSend = false;
                this.remainingTime = 60;
              }
            }, 1000);
          }
        },
        toRegister() {
          if (this.username === '' || this.password === '') {
            ElMessage(
                {
                  message: "用户名或密码不得为空！",
                  type: "warning"
                }
            )
          } else {
            Api.userRegister(this.username, this.password).then(res => {
              if (res.data.code === 0) {
                ElMessage(
                    {
                      message: res.data.msg,
                      type: "error"
                    }
                )
              } else {
                Cookies.set("token", res.data.data)
                ElMessage(
                    {
                      message: "注册成功,已自动登录！",
                      type: "success"
                    }
                )
                this.store.commit("changeOnlineStatus");
                this.store.dispatch("getUserInfo");
                this.CloseModal();
              }
              this.reset();
            })
          }
        },
        smsLogin() {
          if (this.phone === '' || this.messageCode === '') {
            ElMessage(
                {
                  message: '请输入手机号和验证码！',
                  type: "warning"
                }
            )
          }
          if (this.codeSend) {
            //提交后端前先做非空确认
            if (this.phone !== '' && this.messageCode !== '') {
              Api.validateCode(this.phone, this.messageCode).then(res => {
                if (res.data.code === 0) {
                  ElMessage(
                      {
                        message: res.data.msg,
                        type: "error"
                      }
                  )
                } else {
                  Cookies.set("token", res.data.data)
                  ElMessage(
                      {
                        message: "登录成功！",
                        type: "success"
                      }
                  )
                  this.store.commit("changeOnlineStatus");
                  this.store.dispatch("getUserInfo");
                  this.CloseModal();
                }
              })
            }
          }
        },
        toggleShow() {
          this.showPassword = !this.showPassword;
        },
        loginByPassword() {
          if (!this.disable) {
            //发送密码登录请求
            Api.loginByPassword(this.username, this.password).then(res => {
              if (res.data.code === 0) {
                ElMessage({
                  message: res.data.msg,
                  type: "error"
                });
                this.reset();
              } else {
                Cookies.set("token", res.data.data)
                ElMessage(
                    {
                      message: "登录成功！",
                      type: "success"
                    }
                )
                this.store.commit("changeOnlineStatus");
                this.store.dispatch("getUserInfo");
                this.CloseModal();
              }
            });
          }
        },
        search() {
          store.commit("SET_KEY", this.key)
          this.$emit('custom-event');
        },
        toUserCenter() {
          if (this.online === false) {
            this.ShowModal();
            ElMessage.warning('请先登录！');
          } else {
            this.$router.push({
              name: 'userCenter',
            });
          }
        },
        toUpload(){
          if (this.online === false) {
            this.ShowModal();
            ElMessage.warning('请先登录！');
          } else {
            this.$router.push({
              path: '/uploadVideo',
            });
          }
        }
      },
      watch: {
        username(newVal) {
          if (newVal === '') {
            this.disable = true;
          } else {
            this.disable = this.password === '';
          }
        },
        password(newVal) {
          if (newVal === '') {
            this.disable = true;
          } else {
            this.disable = this.username === '';
          }
        },
        phone(newVal) {
          this.codeActive = phoneRegex.test(newVal);
        },
      }

    }
)
</script>
